<template>
  <div
    class="banner"
    :style="{
      backgroundColor: config.pageConfig.color,
    }"
  >
    <div
      :style="{
        marginTop: config.pageConfig.marginTop + 'px',
        marginBottom: config.pageConfig.marginBottom + 'px',
        marginLeft: config.pageConfig.margin + 'px',
        marginRight: config.pageConfig.margin + 'px',
      }"
    >
      <div
        v-if="config.pageConfig.style == 1"
        class="style-1"
      >
        <p
          class="title-name"
          :style="{
            color: config.pageConfig.textcolor,
            fontSize: config.pageConfig.fontsize + 'px',
            fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
            fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            borderColor: config.pageConfig.textcolor,
          }"
        >
          {{ config.pageConfig.title }}
        </p>
        <span
          class="tri-name"
          :style="{
            borderColor: config.pageConfig.textcolor,
          }"
        />
      </div>
      <div
        v-if="config.pageConfig.style == 2"
        class="style-2"
        :style="{
          background:
            config.pageConfig.componentWay == 1
              ? config.pageConfig.componentcolor
              : 'url(' + config.pageConfig.componentUrl + ')',
        }"
      >
        <img
          v-if="config.pageConfig.pictureShow"
          :src="config.pageConfig.pictureUrl"
          :style="{
            borderRadius: config.pageConfig.radius,
          }"
        >
        <div class="title-content">
          <p
            :style="{
              color: config.pageConfig.textcolor,
              fontSize: config.pageConfig.fontsize + 'px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >
            {{ config.pageConfig.title }}
          </p>
          <span
            v-if="config.pageConfig.subTitleShow"
            :style="{
              color: config.pageConfig.subTitlecolor,
              fontSize: config.pageConfig.subFontsize + 'px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >{{ config.pageConfig.subcontent }}</span>
        </div>
        <p
          v-if="config.pageConfig.moreShow"
          class="more-arrow"
          :style="{
            color: config.pageConfig.morecolor,
          }"
        >
          {{ config.pageConfig.morecontent }}
          <el-icon v-if="config.pageConfig.arrowShow">
            <ArrowRightBold />
          </el-icon>
        </p>
      </div>

      <div
        v-if="config.pageConfig.style == 3"
        class="style-3"
      >
        <div class="title-content">
          <el-icon
            :style="{
              color: config.pageConfig.textcolor,
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >
            <StarFilled />
          </el-icon>
          <p
            :style="{
              color: config.pageConfig.textcolor,
              fontSize: '16px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >
            {{ config.pageConfig.title }}
          </p>
          <el-icon
            :style="{
              color: config.pageConfig.textcolor,
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >
            <StarFilled />
          </el-icon>
        </div>
        <span
          v-if="config.pageConfig.subTitleShow"
          :style="{
            color: config.pageConfig.subTitlecolor,
            fontSize: config.pageConfig.subFontsize + 'px',
            fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
            fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
          }"
        >{{ config.pageConfig.subcontent }}</span>
      </div>
      <div
        v-if="config.pageConfig.style == 4"
        class="style-4"
      >
        <div class="title-content">
          <img src="../../../../../../assets/app/other/title/t1_bg.png">
          <p
            :style="{
              color: config.pageConfig.textcolor,
              fontSize: '16px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
          >
            {{ config.pageConfig.title }}
          </p>
          <img src="../../../../../../assets/app/other/title/t1_bg2.png">
        </div>
        <span
          v-if="config.pageConfig.subTitleShow"
          :style="{
            color: config.pageConfig.subTitlecolor,
            fontSize: config.pageConfig.subFontsize + 'px',
            fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
            fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
          }"
        >{{ config.pageConfig.subcontent }}</span>
      </div>

      <div
        v-if="config.pageConfig.style == 5"
        class="style-5"
      >
        <div
          :style="{
            backgroundColor: config.pageConfig.textcolor,
            fontSize: config.pageConfig.fontsize + 'px',
            fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
            fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
          }"
        />
        <p
          :style="{
            color: config.pageConfig.textcolor,
            fontSize: config.pageConfig.fontsize + 'px',
            fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
            fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
          }"
        >
          {{ config.pageConfig.title }}
        </p>
      </div>
      <div
        v-if="config.pageConfig.style == 6"
        class="style-6"
      >
        <div
          class="title-outer"
          :style="{
            borderColor: config.pageConfig.textcolor,
          }"
        >
          <p
            :style="{
              color: config.pageConfig.textcolor,
              fontSize: config.pageConfig.fontsize + 'px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
            }"
            class="title"
          >
            {{ config.pageConfig.title }}
          </p>
          <div
            class="inner-line"
            :style="{
              borderColor: config.pageConfig.textcolor,
            }"
          />
          <div
            class="left-line"
            :style="{
              backgroundColor: config.pageConfig.textcolor,
            }"
          />
          <div
            class="right-line"
            :style="{
              backgroundColor: config.pageConfig.textcolor,
            }"
          />
        </div>
      </div>
      <div
        v-if="config.pageConfig.style == 7"
        class="style-7"
      >
        <div
          class="title-outer"
          :style="{
            borderColor: config.pageConfig.textcolor,
          }"
        >
          <p
            :style="{
              color: config.pageConfig.textcolor,
              fontSize: config.pageConfig.fontsize + 'px',
              fontWeight: config.pageConfig.fontbold ? 'bold' : '400',
              fontStyle: config.pageConfig.fontstyle ? 'italic' : '',
              borderColor: config.pageConfig.textcolor,
            }"
            class="title"
          >
            {{ config.pageConfig.title }}
          </p>
          <div
            class="inner-line"
            :style="{
              borderColor: config.pageConfig.textcolor,
            }"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "TitleShow",
};
</script>
<script lang="ts" setup>
import TitleIcon from "@/assets/images/title-icon.png";
const config = defineProps({
  pageConfig: {
    type: Object,
    default: () => ({
      style: "1",
      color: "transparent",
      textcolor: "#333",
      title: "标题栏",
      marginTop: 0,
      marginBottom: 0,
      margin: 0,
      pictureShow: true,
      pictureUrl: TitleIcon,
      // pictureUrl:
      //   "https://minio.lianhaikeji.com/marketing/act/1663576769000Z8R8title-icon.png",
      radius: 0,
      fontsize: 16,
      fontbold: true,
      fontstyle: false,
      subTitleShow: true,
      subTitlecolor: "#b7bcd2",
      subFontsize: 12,
      subcontent: "RECOMMEND",
      moreShow: true,
      arrowShow: true,
      morecolor: "#b0b3bf",
      morecontent: "查看更多",
      morelink: "",
      componentWay: 1,
      componentcolor: "#fff",
      componentUrl: "",
    }),
  },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  overflow: hidden;
}

.style-1 {
  width: 100%;
  overflow: hidden;
  height: 36px;
  position: relative;

  .title-name {
    width: 100%;
    height: 27px;
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
    text-align: center;
    line-height: 27px;
  }

  .tri-name {
    position: absolute;
    border: 6px solid #000;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    left: 50%;
    top: 22px;
    margin-left: -6px;
    transform: rotate(45deg);
    font-size: 16px;
  }
}

.style-2 {
  display: flex;
  align-items: center;
  height: 60px;
  overflow: hidden;
  position: relative;

  img {
    margin-left: 12px;
    max-width: 40px;
    max-height: 40px;
  }

  .title-content {
    width: calc(100% - 120px);
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .more-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.style-3 {
  width: 100%;
  height: 60px;
  overflow: hidden;

  .title-content {
    width: 100%;
    display: flex;
    height: 26px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;

    :deep(.el-icon) {
      margin-top: -2px;
    }

    p {
      margin: 0 5px;
    }
  }

  span {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    width: 100%;
    display: block;
    text-align: center;
  }
}

.style-4 {
  width: 100%;
  height: 60px;
  overflow: hidden;

  .title-content {
    width: 100%;
    display: flex;
    height: 26px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;

    img {
      margin-top: -2px;
      width: 20px;
    }

    p {
      margin: 0 5px;
    }
  }

  span {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    width: 100%;
    letter-spacing: 2px;
    display: block;
    text-align: center;
  }
}

.style-5 {
  width: 100%;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  div {
    width: 2px;
    height: 22px;
    margin-right: 6px;
    background: #000;
  }

  p {
    height: 24px;
    line-height: 24px;
  }
}

.style-6 {
  position: relative;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  .title-outer {
    position: relative;
    display: inline-block;
    border: 1px solid #000;
    .title {
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      margin: 0 5px;
      z-index: 19;
      position: relative;
      display: inline-block;
    }
    .inner-line {
      position: absolute;
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      border: 1px solid #000;
      z-index: 0;
    }
    .left-line {
      height: 5px;
      position: absolute;
      width: 40px;
      top: 50%;
      background: #000;
      margin-top: -2px;
      left: 0;
      margin-left: -35px;
    }
    .right-line {
      right: 0;
      margin-right: -35px;
      height: 5px;
      position: absolute;
      width: 40px;
      top: 50%;
      background: #000;
      margin-top: -2px;
    }
  }
}

.style-7 {
  position: relative;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  height: 34px;
  .title-outer {
    position: relative;
    display: inline-block;
    .title {
      height: 28px;
      line-height: 28px;
      padding: 0 25px;
      border: 1px solid #000;
      z-index: 3;
      position: relative;
      display: inline-block;
      background: #fff !important;
    }
    .inner-line {
      position: absolute;
      top: 5px;
      right: -5px;
      bottom: -5px;
      left: 5px;
      border: 1px solid #000;
      z-index: 0;
    }
  }
}
</style>
